<template>
  <!-- 新增员工对话框 -->
  <!-- sync修饰符一定要弄明白 -->
  <el-dialog title="新增员工" :visible="showDialog" @close="cancelForm">
    <el-form :model="form" :rules="rules" ref="addDpmForm">
      <el-form-item label="姓名：" label-width="120px" prop="username">
        <el-input
          v-model="form.username"
          autocomplete="off"
          placeholder="1-30个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机：" label-width="120px" prop="mobile">
        <el-input
          v-model="form.mobile"
          autocomplete="off"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="入职时间：" label-width="120px" prop="timeOfEntry">
        <el-date-picker
          v-model="form.timeOfEntry"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="聘用形式："
        label-width="120px"
        prop="formOfEmployment"
      >
        <el-select v-model="form.formOfEmployment" placeholder="请选择">
          <el-option
            v-for="item in hire"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号：" label-width="120px" prop="workNumber">
        <el-input
          v-model="form.workNumber"
          autocomplete="off"
          placeholder="1-20个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门：" label-width="120px" prop="departmentName">
        <el-input
          v-model="form.departmentName"
          autocomplete="off"
          placeholder="请选择"
          @focus="showTree"
          @blur="handleBlur"
        ></el-input>
      </el-form-item>
      <!-- 树形组件 -->
      <div class="tree">
        <el-tree
          :data="departments"
          :props="defaultProps"
          @node-click="handleNodeClick"
          v-if="showDpm"
          v-loading="loading"
          default-expand-all
        ></el-tree>
      </div>

      <el-form-item
        label="转正时间："
        label-width="120px"
        prop="correctionTime"
      >
        <el-date-picker
          v-model="form.correctionTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="submitForm">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDptList } from '@/api/department'
// 导入递归方法
import { toTreeData } from '@/utils/index'
// 导入枚举库
import constant from '@/api/constant/employees'
// 导入增加员工接口
import { addEmp } from '@/api/emloyees'
export default {
  data () {
    return {
      // 枚举值
      hire: constant.hireType,
      showDpm: false,
      loading: false,
      defaultProps: { label: 'name', children: 'children' },
      departments: [],
      form: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],

        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '请选择聘用形式', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '请输入员工工号', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' }
        ]
      }
    }
  },

  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 取消
    cancelForm () {
      // 清空表单数据
      this.form = {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      }
      // 重置表单校验
      this.$refs.addDpmForm.resetFields()
      // 隐藏dialog
      this.$emit('closeDialog')
    },
    // 提交方法
    submitForm () {
      // 1.进行所有的表单校验
      this.$refs.addDpmForm.validate(async v => {
        if (v) {
          // 2.表单校验成功后,发送请求添加员工
          await addEmp(this.form)
          // 4.成功提示
          this.$message.success('添加成功')
          //   // 5.隐藏对话框
          //   this.$emit('closeDialog')
          // 清空表单数据
          this.form = {
            username: '',
            mobile: '',
            formOfEmployment: '',
            workNumber: '',
            departmentName: '',
            timeOfEntry: '',
            correctionTime: ''
          }
          // 重置表单校验
          this.$refs.addDpmForm.resetFields()
          // 隐藏dialog
          this.$emit('closeDialog')
          // 6.重新加载页面，并跳转到新增员工页
          const pageInfo = this.$parent.pageInfo
          // 最新一页
          // total++
          pageInfo.total++
          const lastPage = Math.ceil(pageInfo.total / pageInfo.size)
          console.log(lastPage)
          this.$parent.pageInfo.page = lastPage
          //  父组件刷新页面，
          this.$parent.getList()
        }
      })
    },
    // 失去焦点的判断
    handleBlur (e) {
      // 如果失去焦点的不是
      console.log(e)
      console.log(222)
      // 点击空白部分和不是树形结构里的地方隐藏
      if (
        !e.relatedTarget ||
        e.relatedTarget.className.indexOf('el-tree-node') == -1
      ) {
        this.showDpm = false
      }
    },
    handleNodeClick (v) {
      //   console.log(v)
      // 将name赋值给部门输入框的value
      this.form.departmentName = v.name
      this.showDpm = false
    },
    async showTree () {
      // 显示tree
      this.showDpm = true
      // 显示加载
      //   this.loading = true
      // 请求获取部门列表
      const list = await getDptList()
      //   console.log('111', list)
      // 修改部门列表格式，并赋值给树形结构的data
      this.departments = toTreeData(list.data.depts, '')
      // 关闭加载
      //   this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tree {
  //   border: 1px solid #000;
  padding: 0 150px;
}
</style>
